<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<!--suppress HtmlRequiredTitleElement -->
<head>
    <th:block th:include="include :: header('角色信息')"/>
    <style>
        xm-select, xm-select .xm-select-default {
            height: 100% !important;
        }
    </style>
</head>
<body class="layui-layout-body theme-himio layui-anim layui-anim-upbit">
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 表格工具栏 -->
            <form class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">角色名称:</label>
                        <div class="layui-input-inline">
                            <input name="roleName" class="layui-input" placeholder="请输入角色名称"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">权限标识:</label>
                        <div class="layui-input-inline">
                            <input name="roleKey" class="layui-input" placeholder="请输入权限标识"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">角色状态:</label>
                        <div class="layui-input-inline">
                            <label>
                                <select name="status" th:with="type=${@dict.getType('sys_normal_disable')}">
                                    <option value="">全部</option>
                                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                            th:value="${dict.dictValue}"></option>
                                </select>
                            </label>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">创建时间:</label>
                        <div class="layui-input-inline">
                            <input name="gmtCreate" lay-date lay-date-range class="layui-input icon-date"
                                   placeholder="选择日期范围" autocomplete="off" style="width: 210px;"/>
                        </div>
                    </div>
                    <div class="layui-inline">&emsp;
                        <button class="layui-btn icon-btn" lay-filter="roleTbSearch" lay-submit>
                            <i class="layui-icon layui-icon-search"></i>搜索
                        </button>
                    </div>
                </div>
            </form>
            <!-- 数据表格 -->
            <table id="roleTable" lay-filter="roleTable"></table>
        </div>
    </div>
</div>

<!--表格操作工具按钮-->
<script type="text/html" id="roleTbBar">
    <a class="layui-btn layui-bg-cyan layui-btn-sm icon-btn" lay-event="role" shiro:hasPermission="system:role:edit" ew-href="/system/role/authUser/{{d.roleId}}" ew-title="【{{d.roleName}}】用户分配"><i
            class="fa fa-users"></i>分配用户</a>
    {{# if(d.roleKey !== 'admin'){ }}
    <a class="layui-btn layui-bg-blue layui-btn-sm icon-btn" lay-event="edit" shiro:hasPermission="system:role:edit"><i
            class="fa fa-edit"></i>修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-sm icon-btn" lay-event="del"
       shiro:hasPermission="system:role:remove"><i
            class="fa fa-trash"></i>删除</a>
    {{#}}}
</script>

<!-- 表单弹窗 edit -->
<script type="text/html" id="roleEditDialog">
    <form id="roleEditForm" lay-filter="roleEditForm" class="layui-form model-form">
        <input type="hidden" name="roleId">
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">角色名称:</label>
            <div class="layui-input-block">
                <input name="roleName" class="layui-input" lay-verType="tips" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">权限标识:</label>
            <div class="layui-input-block">
                <input name="roleKey" class="layui-input" lay-verType="tips" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">显示顺序:</label>
            <div class="layui-input-block">
                <input name="roleSort" type="number" class="layui-input" lay-verType="tips" lay-verify="required" required style="width: 200px;"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">数据范围 <i class="fa fa-info-circle" lay-tips="特殊情况下，设置为“自定数据权限”"></i>:</label>
            <div class="layui-input-block">
                <label>
                    <select name="dataScope" lay-filter="dataScope" th:with="type=${@dict.getType('sys_datascope')}" lay-verType="tips" lay-verify="required" required>
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                th:value="${dict.dictValue}" th:selected="${dict.default}"></option>
                    </select>
                </label>
            </div>
        </div>
        <div class="layui-form-item layui-hide" id="dataScopeItem">
            <label class="layui-form-label layui-form-required">权限范围:</label>
            <div class="layui-input-block">
                <div id="dataScopeDeptSel" class="xm-select-demo"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">角色状态:</label>
            <div class="layui-input-block">
                <input type="radio" th:each="dict : ${@dict.getType('sys_normal_disable')}" th:id="${dict.dictCode}"
                       th:title="${dict.dictLabel}"
                       name="status" th:value="${dict.dictValue}" th:checked="${dict.default}"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">菜单权限 <i class="fa fa-info-circle" lay-tips="这里只是粗略的展示一级菜单，并不代表子菜单全部被勾选了，仅代表该一级菜单下有被勾选的子菜单"></i>:</label>
            <div class="layui-input-block">
                <div id="menuSel" class="xm-select-demo"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注:</label>
            <div class="layui-input-block">
                <label>
                    <textarea name="remark" class="layui-textarea"></textarea>
                </label>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn" lay-filter="roleEditSubmit" lay-submit>保存</button>
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        </div>
    </form>
</script>

<!-- js部分 -->
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    var addFlag = [[${@permission.hasPermit('system:role:add')}]];
    var editFlag = [[${@permission.hasPermit('system:role:edit')}]];
    var removeFlag = [[${@permission.hasPermit('system:role:remove')}]];
    var exportFlag = [[${@permission.hasPermit('system:role:export')}]];
    var dictSysNormalDisable = [[${@dict.getType('sys_normal_disable')}]];
    var prefix = ctx + "system/role";
    var prefixMenu = ctx + "system/menu";
    var prefixDept = ctx + "system/dept";
</script>
<script th:src="@{/static/assets/system/js/role.js}"></script>
</body>
</html>

